<template>
  <a-modal
    class="entitlementCard"
    :visible="visible"
    :title="'权益卡'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="900px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div class="searchBox">
      <a-input-search
        placeholder="请输入权益卡名称"
        style="width: 200px"
        v-model="searchParams.cardName"
        @search="onSearch"
      />
      <a-button
        type="primary"
        style="margin-left: 10px"
        @click="onSearch"
        :loading="tableLoading"
      >
        搜索
      </a-button>
      <a-button
        style="margin-left: 10px"
        @click="resetSearch"
        :loading="tableLoading"
        >重置</a-button
      >
    </div>
    <div class="allCard">
      <div
        class="box"
        v-for="(item, index) in cardList"
        :key="index"
        @click="chooseCard(item)"
        :style="item.checked ? chedkedStyle : ''"
      >
        <div class="cardItem">{{ item.cardName }}</div>
        <div class="box-con" v-show="item.checked">
          <span><a-icon type="check" /></span>
        </div>
      </div>
    </div>
    <h3 class="checkedTitle">已选权益卡</h3>
    <div class="checkedCard">
      <div
        class="box"
        v-for="(item, index) in checkedList"
        :key="index"
        @click="chooseCard(item)"
        :style="item.checked ? chedkedStyle : ''"
      >
        <div class="cardItem">{{ item.cardName }}</div>
        <div class="box-con">
          <span><a-icon type="check" /></span>
        </div>
      </div>
    </div>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: "entitlementCard",
  props: {
    benefitsCardIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      cardList: [],
      checkedList: [],
      searchParams: {
        cardName: "",
      },
      tableLoading: false,
    };
  },
  computed: {
    chedkedStyle() {
      return {
        border: "1px solid rgb(40, 104, 216)",
        color: "rgb(40, 104, 216)",
        background: "rgb(237,244,255)",
      };
    },
  },
  methods: {
    // 确定提交
    handleSubmit() {
      this.confirmLoading = true;
      const ids = [];
      this.checkedList.forEach((item) => {
        ids.push(item.id);
      });
      this.$emit("comfirmCard", ids);
      this.visible = false;
      this.searchParams = {
        cardName: "",
      };
    },
    // 取消
    closeModal() {
      this.visible = false;
      this.searchParams = {
        cardName: "",
      };
      this.$emit("cancel", false);
    },
    async initCardList() {
      let res = await this.$get("goldenhome/member/admin_/benefits/card/list", {
        isEnabled: 1,
      });
      if (res && res.returnCode == 1000) {
        if (res.dataInfo != null) {
          const arr = [];
          res.dataInfo.forEach((item) => {
            arr.push({
              id: item.id,
              cardName: item.cardName,
              checked: false,
            });
          });
          arr.forEach((item) => {
            this.benefitsCardIdList.forEach((l) => {
              if (item.id == l) {
                item.checked = true;
              }
            });
          });
          this.cardList = arr;
          this.checkedList = [];
          this.cardList.forEach((item) => {
            if (item.checked) {
              this.checkedList.push(item);
            }
          });
        }
      }
    },
    chooseCard(item) {
      item.checked = !item.checked;
      if (item.checked) {
        this.checkedList.push(item);
      } else {
        this.checkedList.forEach((l, index) => {
          if (l.id == item.id) {
            this.checkedList.splice(index, 1);
          }
        });
      }
    },
    async getCardList() {
      this.tableLoading = true;
      let res = await this.$get("goldenhome/member/admin_/benefits/card/list", {
        isEnabled: 1,
        ...this.searchParams,
      });
      if (res && res.returnCode == 1000) {
        if (res.dataInfo != null) {
          const arr = [];
          res.dataInfo.forEach((item) => {
            arr.push({
              id: item.id,
              cardName: item.cardName,
              checked: false,
            });
          });
          arr.forEach((item) => {
            this.checkedList.forEach((l) => {
              if (item.id == l.id) {
                item.checked = true;
              }
            });
          });
          this.cardList = arr;
        }
      }
      this.tableLoading = false;
    },
    onSearch() {
      this.getCardList();
    },
    resetSearch() {
      this.searchParams.cardName = "";
      // this.checkedList = [];
      this.getCardList();
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.initCardList();
      }
    },
    // cardList: {
    //   deep: true,
    //   handler(n, o) {
    //     const arr = [];
    //     n.forEach((item) => {
    //       if (item.checked) {
    //         arr.push(item);
    //       }
    //     });
    //     this.checkedList = arr;
    //   },
    // },
  },
};
</script>

<style scoped lang="less">
.allCard,
.checkedCard {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e8e8e8;
  padding: 10px 20px 20px;
}
.box {
  // width: 180px;
  // height: 100px;
  flex-shrink: 0;
  min-width: 70px;
  min-height: 40px;
  position: relative;
  background: rgb(242, 243, 245);
  overflow: hidden;
  border: 1px solid #fff;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 15px;
  box-sizing: border-box;
  .cardItem {
    height: 100%;
    line-height: 40px;
    padding: 0 15px;
    font-size: 16px;
    text-align: center;
  }
  .box-con {
    width: 30px;
    height: 30px;
    position: absolute;
    background: rgb(73, 94, 236);
    top: -15px;
    right: -15px;
    transform: rotate(45deg);
    span {
      position: absolute;
      bottom: -41px;
      top: 9px;
      display: block;
      width: 60px;
      text-align: center;
      transform: rotate(-45deg);
      color: #ffffff;
      font-size: 12px;
    }
  }
}
.checkedTitle {
  font-size: 18px;
  color: #000;
  font-weight: 700;
  margin: 10px 0;
}
.searchBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
